<script setup>
import { ref ,onMounted} from 'vue';
import { useRoute } from 'vue-router';
import { useCartStore } from '../stores/cart.js';
import { useFavoritesStore } from '../stores/favorites.js';
import {Cartinsert} from "@/utils/config.js";
import {ElMessage} from "element-plus";
const route = useRoute();
const handleChange = (value) => {
  console.log(value);
};
// onMounted(()=>{
//   GetData.value = route.query.matchedProduct
// })
const favoritesStore = useFavoritesStore();
const cartStore = useCartStore();

const num = ref(1);
const stock = ref(route.query.stock || '0');
const id = ref(route.query.id || '0');
const name = ref(route.query.name || '');
const price = ref(route.query.price || '0');
const description = ref(route.query.description || '');
const image = ref(decodeURIComponent(route.query.image) || 'default-image-url.jpg');

// 定义添加到购物车的函数
const addToCart = async () => {
    // const newItem = {
    //   id: id.value,
    //   name: name.value,
    //   price: price.value,
    //   number: num.value,
    //   stock: stock.value
    // };
  const SumPrice = ref()
  const newItem = {
    productId: id.value,
    quantity: num.value,
    name: name.value,
    price: price.value,
  };
  await Cartinsert(newItem);
  ElMessage.success('添加成功')
};
const handleCartInsert = async () => {
  const res = await Cartinsert({
    "userId":1,
    "productId":id.value,
    "quantity":num.value

  });
  console.log(res);
};
// 定义收藏的函数
const addToFavorites = () => {
  const favoriteItem = {
    id: id.value,
    name: name.value,
    price: price.value,
    description: description.value,
    image: image.value
  };
  favoritesStore.addItem(favoriteItem);
}

//加入购物车


</script>

<template>
  <div class="null">

  </div>
  <div class="new-course">
      <div class="goods">
        <div class="goods-img">
          <img :src="image"  style="height: 377px;width: 440px">
        </div>
        <div class="text">
          <div class="goods_tittle">
            <div>{{name}}</div>
            <div class="goods_tittle-description">{{description}}</div>
          </div>
          <div class="goods_main">
            <div class="price">
                <span class="a">价格</span>
                <span class="b">{{price}}</span>
            </div>
            <div style="margin-top: 5px">
              <span class="c">邮费</span>
              <span class="d">满xxx元，免邮</span>
            </div>
            <div style="margin-top: 5px;margin-bottom: 16px">
              <span class="c">配送</span>
              <span class="d">xxxxxxx</span>
            </div>
            <hr>
            <div style="margin-top: 20px">
              <span class="c">服务</span>
              <span class="d">不支持无忧退换    ･ 不享受学生折扣    ･ 国内部分地区不可配送</span>
            </div>
          </div>
          <div style="margin-top: 20px">
            <span class="c">数量</span>
            <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
          </div>
          <div style="margin-top: 25px">
            <button class="btn1">
              <span>立即购买</span>
            </button>
            <button class="btn2" @click="() => { addToCart(); handleCartInsert(); }">
              <span>加入购物车</span>
            </button>
            <button class="btn3" @click="addToFavorites">
              <span>收藏</span>
            </button>
          </div>
        </div>
      </div>
  </div>

</template>


<style scoped>
.new-course{
  width: 1200px;
  margin: 0 auto;
  background-color: white;
  height: 800px;
}
.null{
  background-color:#f5f5f5;
  height: 52px;
}
.text{
  float: right;
  width: 620px;
  word-break: break-all;
  word-wrap: break-word;
  position: relative;
  background-color: white;
  height: 490px;
  margin-top: 30px;
  margin-right: 30px;
}
.goods-img{
  height: 490px;
  width: 430px;
  margin-top: 30px;
  margin-left: 30px;
}
.goods{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 490px;
}
.goods_tittle{
  border-bottom: 20px;
  overflow: hidden;
  height: 57px;
  background-color: white;
}
.goods_tittle-description{
  font-size: 20px;
  font-weight: 700;
  margin-top: 3px;
}
.goods_main{
  background-color: #f5fafd;
  height: 190px;
}
.price{
  height: 45px;
}
.a{
  line-height: 30px;
  width: 55px;
  font-size: 13px;
  float: left;
  color: #666;
  margin-left: 10px;
  margin-top: 13px;
}
.b{
  font-size: 28px;
  line-height: 30px;
  color: red;
  margin-top: 12px;
  display: inline-block;
}
.c{
  color: #666;
  margin-left: 10px;
  font-size: 13px;
  float: left;
  width: 55px;
  margin-top: 6px;
}
.d{
  color: #444444;
  margin-top: 6px;
  display: inline-block;
}
.btn1{
  width: 168px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #9bdaf5;
  border: 1px solid #cbebf8;
  background-color: #e5f4fa;
  display: inline-block;
  text-align: center;
}
.btn2{
  width: 168px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #79ccef;
  border: 1px solid #cbebf8;
  background-color: #e5f4fa;
  display: inline-block;
  text-align: center;
  margin-left: 20px;
}
.btn3{
  width: 168px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #38bcf5;
  border: 1px solid #cbebf8;
  background-color: #e5f4fa;
  display: inline-block;
  text-align: center;
  margin-left: 20px;
}
.btn1:hover, .btn2:hover, .btn3:hover{
  background-color: #64c3f6;
  color: #c6e5f6;
}
</style>